<template>
    <div >
        <!--导航条-->
        <div id="Tabbar">
            <span id="span" @click="backClick">
                <span class="fa fa-angle-left"></span>
                <span >返回</span>
            </span>
            <span class="cont">{{this.$route.params.title}}</span>
        </div>

        <!--全部内容-->
        <div v-for="i in imgs8" class="goodsDetails">
            <Swiper
                :list="i.imgs"
                loop
                :height="height"
            >

            </Swiper>

            <div id="Goods-content">
                <div id="Goods-content-first">
                    <p>{{i.title}}</p>
                    <span>醉品价格</span>
                    <span>￥{{i.price}}</span>	
                </div>
                <div class="Goods-content-second">
                    <div>
                        促销
                    </div>
                    <div>
                        <p>
                            <span>直降</span>
                            <span>优惠5000年</span>	
                        </p>
                        <p>
                            <span>包邮</span>
                            <span>全场支付满59元免邮费</span>
                        </p>
                    </div>
                </div>
                <div class="Goods-content-second">
                    <div>
                        服务
                    </div>
                    <div>
                        <ul>
                            <li>全场商品90天保价</li>
                            <li>30天无忧退货</li>
                            <li>满59元免邮费</li>
                            <li>2000城市货到付款</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="goods-number">
                <span>数量</span>
                <span>
                <span @click="minusNumber">-</span>
                <span id="goods-number-span2">{{number}}</span>
                <span @click="addNumber">+</span>
                </span>
            </div>
            <div id="button">
                <button>立刻购买</button>
                <button @click="joinGoodsCard(i.title)">加入购物车</button>
            </div>
        </div>    
    </div>
</template>

<script>
import {mapState} from 'vuex';
import {Swiper} from 'vux';
export default {
    data:function(){
        return {
            height:"65vh",
            number:1
        }
    },
    methods:{
        backClick:function(){
            history.back();
        },
        minusNumber:function(){
            if(this.number==1){
                return;
            }else{
                this.number--;
            }
        },
        addNumber:function(){
            this.number++;
        },
        joinGoodsCard:function(e){

            if(!sessionStorage.userInfo){
                this.layer.msg("请先登录")
                setTimeout(function() {
                    location.hash="/Myself"
                }, 100);
            }else{
                var d ={
                    number:this.number,
                    title:e
                }
                this.$store.dispatch("joinGoodsCard",d)
                .then(data=>{
                    location.hash = "/GoodsCard";
                    this.layer.msg("添加成功")
                })
            }
        }
    },
    computed:{
        ...mapState([
            "imgs8"
        ])
    },
    components:{
        Swiper,
    },
    mounted:function(){
        this.$store.dispatch("goodsDetails",this.$route.params)
        .then(data=>{
            
        })
    }
}
</script>

<style scoped>
    #Tabbar{
        height: 8vh;
        width: 100vw;
        background-color: #ff6347;
        color: white;
        font-size: 4.5vw;  
        text-align: center;
        line-height: 8vh;
        position: fixed;
        top:0;
        z-index: 100;
    }
    #Tabbar #span{
        position: relative;
        top:-2.5vh;
        left: -20vw;
    }
    .cont{
        display: inline-block;
        width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    img{
        width: 100vw;
        height: 60vh;
    }
    #Goods-content{
        font-size: 4vw;
    }
    #Goods-content-first{
        border-bottom: solid 1px #dedede;
        padding-left: 4vw;
        padding-bottom: 2vh;
    }
    #Goods-content-first p{
        margin: 1vh 0;
    }
    #Goods-content-first span{
        font-size: 3.5vw;
    }
    #Goods-content-first span:nth-of-type(2){
        color: #cd0000;
    }
    .Goods-content-second{
        display: flex;
        font-size: 3.5vw;
        margin-left: 4vw;
        margin-right: 4vw;
        border-bottom: solid 1px #dedede;
    }
    .Goods-content-second div:nth-of-type(1){
        line-height: 7vh;
        font-size: 3.8vw;
        width: 10VW;

    }
    .Goods-content-second div:nth-of-type(2){
        margin-left: 5vw;
    }
    .Goods-content-second div:nth-of-type(2) p{
        margin:1vh;
    }
    .Goods-content-second div:nth-of-type(2) p span:nth-of-type(1){
        background-color: #cd0000;
        padding: 0 2vw;
        color: white;
        border-radius: 1.5vw;
    }
    .Goods-content-second div:nth-of-type(2) p span:nth-of-type(2){
        color: grey;
        margin-left: 2vw;
    }
    .Goods-content-second div:nth-of-type(2) ul{
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-left: -13vw;

    }
    .Goods-content-second div:nth-of-type(2) ul li{
        margin: 1vh 0;
        width: 33vw;
        list-style: none;
    }
    .Goods-content-second div:nth-of-type(2) ul li:before{
        content:"● ";
        color:#cd0000;
    }
    .goodsDetails{
        height: calc(100vh - 16vh);
        margin-top: 8vh;
        overflow-y: scroll;
    }
    #button{
        position: fixed;
        display: flex;
        width: 100vw;
        bottom: 0;
        /*box-sizing: border-box;*/
    }
    #button button{
        height: 8vh;
        width: 50vw;
        border: none;
        color: white;
        padding: 0;
 
    }
    #button button:nth-of-type(1){
        background-color: #ff8247;
       
    }
    #button button:nth-of-type(2){
        background-color: red;
    }
    #goods-number{
        height: 10vh;
        line-height: 10vh;
    }
    #goods-number{
        font-size: 4vw;
        padding-left: 4vw;
    }
    #goods-number span:nth-of-type(1){
        margin-right: 5vw;
    }
    
    #goods-number span:nth-of-type(2) span{
        border: 1px solid gray;
        margin: 0;
        padding: 1vh 3vw;
        
    }
    #goods-number span:nth-of-type(2) span:nth-of-type(1){
        border-top-left-radius: 1vw;
        border-bottom-left-radius: 1vw;
    }
    #goods-number span:nth-of-type(2) span:nth-of-type(2){
        padding: 1vh 6vw;
        border-right: none;
        border-left: none;
        position: relative;
        right: 1.2vw;
    }
    #goods-number span:nth-of-type(2) span:nth-of-type(3){
        position: relative;
        right: 2.2vw;
        border-top-right-radius: 1vw;
        border-bottom-right-radius: 1vw;
    }
</style>